
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="fu.abc.model.Account"%>
<%@page import="fu.abc.DAO.AccountDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Vnplace - Quản lý tài khoản</title>
	
	<!-- CSS -->
	<link href="css/transdmin.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/4.css"/>
    <link href="./systemAdmin/css/transdmin.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="./systemAdmin/css/4.css"/>
    
    <script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/jts.js"></script>
    <script language="JavaScript" type="text/javascript" src="./systemAdmin/js/jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="./systemAdmin/js/jts.js"></script>
	<style>
		body {
			font-size: 15px;
		}
		#header {
			height: 60px;
			width: max;
			background: #19A3A3;
			color: white;
		}
		
		a.logout {
			list-style: none;
			font-size: 15px;
			float: right;
			padding-top: 22px;
			text-decoration: none;
			color: white;
			margin-right: 20px;
		}
		
		a.logout:hover {
			color: #E6E6B8;
			text-decoration: underline;
			font-size: 16px;
		}
		
		p.hello {
			float: right;
			font-size: 15px;
			margin-right: 30px;
			padding-top: 22px;
		}
		
		a.name {
			text-decoration: none;
		}
		
		a.name:hover {
			text-decoration: underline;
			color: black;
		}
		
		select.select-role {
			width: 150px;
			height: 26px;
			margin-bottom: 10px;
			margin-left: 10px;
		}
		li.create{
			background: #CCEBEB;
		}
		ul.ul-sort li{
			float: left;
		}
		input.sort{
			height: 28px;
			width: 90px;
			margin-left: 3px;
			margin-bottom: 13px;
			margin-top: -1px;
		}
		input.txtsearch {
			height: 20px;
			margin-left: 10px;
		}
		#demoTable thead th {
              white-space: nowrap;
              overflow-x:hidden;
              padding: 3px;
         }
         #demoTable tbody td {
               padding: 3px;
         }
         #count{
         	margin-top: 20px;
         	margin-bottom: 20px;
         	margin-right: 500px;
         }
		#createaccount{
			float: right;
			margin-right: 20px;
			margin-top: -40px;
			margin-bottom: 20px;
		}
		button.create-acc {
			height: 30px;
			width: 150px;
			background: 	#19A3A3;
			border: thin;
			color: white;
			font-size: 1em;
		}
		button.create-acc:hover{
			background: 	#007A7A;
		}
	</style>
	 <script>
                $(document).ready(function () {
                
                        $('#demoTable').jTPS( {perPages:[5,12,15,50,'Tất cả'],scrollStep:1,scrollDelay:30,
                                clickCallback:function () {     
                                        // target table selector
                                        var table = '#demoTable';
                                        // store pagination + sort in cookie 
                                        document.cookie = 'jTPS=sortasc:' + $(table + ' .sortableHeader').index($(table + ' .sortAsc')) + ',' +
                                                'sortdesc:' + $(table + ' .sortableHeader').index($(table + ' .sortDesc')) + ',' +
                                                'page:' + $(table + ' .pageSelector').index($(table + ' .hilightPageSelector')) + ';';
                                }
                        });

                        // reinstate sort and pagination if cookie exists
                        var cookies = document.cookie.split(';');
                        for (var ci = 0, cie = cookies.length; ci < cie; ci++) {
                                var cookie = cookies[ci].split('=');
                                if (cookie[0] == 'jTPS') {
                                        var commands = cookie[1].split(',');
                                        for (var cm = 0, cme = commands.length; cm < cme; cm++) {
                                                var command = commands[cm].split(':');
                                                if (command[0] == 'sortasc' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .sortableHeader:eq(' + parseInt(command[1]) + ')').click();
                                                } else if (command[0] == 'sortdesc' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .sortableHeader:eq(' + parseInt(command[1]) + ')').click().click();
                                                } else if (command[0] == 'page' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .pageSelector:eq(' + parseInt(command[1]) + ')').click();
                                                }
                                        }
                                }
                        }

                        // bind mouseover for each tbody row and change cell (td) hover style
                        $('#demoTable tbody tr:not(.stubCell)').bind('mouseover mouseout',
                                function (e) {
                                        // hilight the row
                                        e.type == 'mouseover' ? $(this).children('td').addClass('hilightRow') : $(this).children('td').removeClass('hilightRow');
                                }
                        );

                });


        </script>
</head>

<body class="dt-example">
	<div id="wrapper">
		<!-- h1 tag stays for the logo, you can use the a tag for linking the index page -->
		<div id="header">
			<%String acc = (String)session.getAttribute("acc"); %>
			<a href="./systemAdmin/logout.jsp" class="logout">Đăng xuất</a>
			<%
				if(acc==null){
					response.sendRedirect("/Vnplace/systemAdmin/login.jsp");
				}else{
				
			%>
			<p class="hello">
				Chào <b><%=acc %></b>
			</p>
			<%} %>
		</div>

		<!-- // #end mainNav -->

		<div id="containerHolder">
			<h1>Hệ thống quản lý</h1>
			<div id="container">
				<div id="sidebar">
					<ul class="sideNav">
						<li><a href="/Vnplace/systemAdmin/systemAdmin.jsp">Trang chủ</a></li>
						<li><a href="/Vnplace/systemAdmin/manageAccount.jsp">Quản lý tài khoản</a></li>
<!-- 						<li><a href="/Vnplace/systemAdmin/createAccount.jsp" >Tạo tài khoản mới</a></li> -->
					</ul>
					<!-- // .sideNav -->
				</div>
				<!-- // #sidebar -->

				<div id="main">
					<section id="main_content" class="inner">
						<fieldset id="fieldset">
							<legend>Quản lý tài khoản</legend>
							
<!-- 							select following role -->
							<div>
								<form action="/Vnplace/SearchAccount" method="post">
									<ul class="ul-sort">
										<li><b>Từ khóa:</b> </li>
										<li><input type="text" size="35" name="txtSearch" class="txtsearch" placeholder="Tìm kiếm........." /> </li>
										<li style="margin-left: 10px"><b>Chức vụ:</b> </li>
										<li><select name="role" class="select-role">
												<option value="" selected="selected">------- Chọn tất cả --------</option>
												<option value="System Admin">System Admin</option>
												<option value="Content Editor">Content Editor</option>
											</select></li>
										<li><input type="submit" name="sort" value="Tìm Kiếm" class="sort"/></li>
									</ul>
								</form>
							</div>
							<br/>
								<div id="count">
									<b class="count">Có
									<%
										// 	GET data from searchaccount
										Object ab = request.getAttribute("listAccount");
										if (ab != null) {
											List<Account> list = (ArrayList<Account>) ab;
											int i = 1;
											int count=1;
											int dem = 0;
											for (Account a : list) {
												dem = count++ ;
											} %>
										<%= dem %> kết quả được tìm thấy</b>
								</div>
								<div id="createaccount">
									<button class="create-acc" onclick="window.location='./systemAdmin/createAccount.jsp'">Tạo tài khoản mới</button>
								</div>
<!-- 								show data in table -->
								<table id="demoTable">
									<thead>
										<tr>
											<td align="center" width="6"><b>STT</b></td>
											<td align="center"><b>Tên</b></td>
											<td align="center"><b>Địa chỉ</b></td>
											<td align="center"><b>Chức vụ</b></td>
											<td align="center"><b>Tài khoản</b></td>
											<td align="center"><b>Trạng thái</b></td>
										</tr>
									</thead>
									<tbody>
										<%for (Account a : list) {
											int status = a.getStatus();
										%>
										<tr>
											<td><%=i++%></td>
											<td><a href="systemAdmin/viewAccount.jsp?idAcc=<%=a.getIdAcc() %>" class="name"><%=a.getFullname()%></a></td>
											<td><%=a.getAddress() %></td>
											<td><%=a.getRole() %></td>
											<td><%=a.getUsername()%></td>
											<td>
												<%
													if(status==0){
														out.print("Đã hủy tài khoản");
													}else{
														out.print("Tồn tại");
													}
												%>
											</td>
										</tr>
										<%} 
									}%>
									</tbody>
									
									<tfoot class="nav">
               							 <tr>
						                     <td colspan="6">
						                          <div class="pagination"></div>
						                          <div class="paginationTitle">Trang</div>
						                          <div class="selectPerPage"></div>
						                          <div class="status"></div>
						                     </td>
						                </tr>
						        	</tfoot>
								</table>
						</fieldset>
						
					 </section>
				</div>
				<!-- // #main -->

				<div class="clear"></div>
			</div>
			<!-- // #container -->
		</div>
		<!-- // #containerHolder -->
		<div id="footer" class="footer">
			<p class="copyright">©Copyright 2014 Vnplace.vn</p>
		</div>
	</div>
	<!-- // #wrapper -->
</body>
</html>
